<template>
	<view class="content-header">
		<view class="top20"></view>
		<view class="address">
			<view class="address-top">
				<view class="flex-row flex-content-between ones">
					<view>持卡人姓名</view>
					<input class="input" v-model="form.user_name" placeholder="请输入姓名" placeholder-class="input-p"/>
				</view>
				<view class="flex-row flex-content-between ones">
					<view>持卡人姓名</view>
					<mu-select-seach class="yinhangka" @change="selectedBank" :localdata="bankList"
					:value="form.mumerchant_bank_id"	placeholder="请输入银行"></mu-select-seach>
				</view>
				<view class="flex-row flex-content-between ones">
					<view>证件号码</view>
					<input class="input" v-model="form.id_num" placeholder="请输入证件号码" placeholder-class="input-p"/>
				</view>
				<view class="flex-row flex-content-between ones" v-if="type==1">
					<view>信用卡有效期</view>
					<view class="flex-row flex-item-center">
						<view>
							<picker class="pick" mode="date" @change="changeDate" fields="month">
								<view :class="expiration_date?`detal-body-se`:``">{{expiration_date?expiration_date:"请选择"}}</view>
							</picker>
						</view>
						<image class="you-img" src="../../static/index/you.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex-row flex-content-between ones" v-if="form.type==2">
					<view>cvn码(安全码)</view>
					<view class="flex-row flex-item-center">
						<input class="input" v-model="form.cvn" placeholder="请输入cvn吗" placeholder-class="input-p"/>
					</view>
				</view>
				<view class="flex-row flex-content-between ones">
					<view>{{form.type==1?`储蓄卡号`:`信用卡号`}}</view>
					<input class="input" v-model="form.card_num" placeholder="请输入卡号" placeholder-class="input-p"/>
				</view>
				<view class="flex-row flex-content-between ones">
					<view>银行签约手机号</view>
					<input class="input" v-model="form.user_mobile" placeholder="请输入签约手机号码" placeholder-class="input-p"/>
				</view>
			</view>
		</view>
		<mu-suspension bottom="210">
			<view class="flex-row">
				<view class="foot" @tap="changeBankCard">确认修改</view>
			</view>
		</mu-suspension>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:0,
				bankList: [], //银行列表
				typeList:[
					"身份证",
					"三证合一"
				],
				expiration_date:"",
				form:{
					user_name:"",
					id_num:"",
					card_num:"",
					user_mobile:"",
					cvn:"",
					type:"",
					is_default:"",
					expiration_date_year:"",
					expiration_date_month:"",
					id_type:"",
					mumerchant_bank_id:"",
					id:"",
				}
			}
		},
		onLoad(opt) {
			if(opt.type){
				this.type = opt.type
			}
			if(opt.title){
				uni.setNavigationBarTitle({
					title:opt.title
				})
			}
			if(opt.id){
				this.form.id = opt.id;
				this.getCardInfo(opt.id);
			}
			this.getBankList();
		},
		methods:{
			//变更银行卡
			changeBankCard(){
				let form = this.form;
				let that = this;
				this.$api.changeUserCard(form).then(res=>{
					that.$store.dispatch("getUserCard");
					that.$utils.showMessage("修改成功",()=>{
						uni.navigateBack();
					})
				})
			},
			//获取银行列表
			getBankList() {
				let that = this;
				this.$api.getBankList().then(res => {
					// console.log(res);
					if (res && res.length > 0) {
						let bankList = []
						res.forEach(item => {
							bankList.push({
								text: item.name,
								value: item.id
							})
						})
						that.bankList = bankList
					}
					// that.bankList = res;
				})
			},
			//获取卡详情
			getCardInfo(id){
				let that = this
				this.$api.getCardInfo({
					id:id
				}).then(res=>{
					console.log(res);
					that.form = res;
					if(res.expiration_date_month&&res.expiration_date_year){
						that.expiration_date = "20"+res.expiration_date_year+"-"+res.expiration_date_month
					}
				})
			},
			//修改证件类型
			changeType(e){
				// console.log(e);
				var typeList = this.typeList;
				var index = e.detail.value;
				// console.log(typeList[index]);
				this.form.id_type = typeList[index]
			},
			//修改日期
			changeDate(e){
				console.log(e);
				var value = e.detail.value
				this.expiration_date = value;
				let dateArray = value.split("-")
				// console.log(dateArray);
				this.form.expiration_date_month = dateArray[1];
				this.form.expiration_date_year = dateArray[0].substr(-2)
				// console.log(this.form);
			},
			//选择银行卡
			selectedBank(e){
				// console.log(e);
				this.form.mumerchant_bank_id = e
			}
		}
	}
</script>

<style lang="scss">
	.yinhangka{
		// background-color: #50BC16;
		height: 40rpx;
	}
	.foot{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #71DA38 0%, #50BC16 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		margin-left: 175rpx;
	}
	.input{
		text-align: end;
		width: 450rpx;
	}
	.pick{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.you-img{
		width: 14rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}
	.detal-body-se{
		color: #333333 !important;
	}
	.input-p{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-align: end;
	}
	.ones{
		margin-bottom: 70rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.address-top{
		padding-top: 50rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.address{
		width: 750rpx;
		height: calc(100vh - 115rpx);
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
</style>